import React from 'react'

// import Button from './components/button/Button'
import {Button} from './components/laoxie'
import LifeCycle from './components/Lifecycle';

class App extends React.Component{
    state = {
        age:18,
        msg:'hello',
        show:true
    }
    render(){
        // 创建ref对象, ref.current得到节点或组件的引用
        // const refObj = React.createRef();
    
        // setTimeout(()=>{
        //     console.log('refObj',refObj.current.state)
        // })
    
        return (
            <div>
                App
                <h4>组件封装</h4>
    
                {/* 利用函数实现从子组件把数据传递到父组件 */}
                {/* <Button className="btn-success">{
                    (value)=>{
                        return <div>hello {value}</div>
                    }    
                }</Button>
    
                <Button className="btn-danger"><span>删除</span><span>delete</span></Button>
                <Button className="btn-border"><strong>清空</strong></Button> 
                <Button render={(type)=><div>hello {type}</div>}></Button>*/}
    
                {/* 事件 */}
                {/* <Button onClick={()=>{console.log(666)}} className="btn-border">添加</Button>
                <Button index="10" age="26">Props类型校验</Button>
    
                <Button ref={refObj}>Props默认值</Button> */}

                {
                    this.state.show ?
                    <LifeCycle age={this.state.age}/>
                    :
                    null
                }

                <button onClick={()=>{
                    this.setState({
                        age:this.state.age + 1
                    })
                }}>父组件修改数据：{this.state.age}</button>

                <button onClick={()=>{
                    this.setState({
                        msg:this.state.msg + ' ' + this.state.msg
                    })
                }}>{this.state.msg}</button>

                <button onClick={()=>{
                    this.setState({
                        show:!this.state.show
                    })
                }}>销毁/重建</button>
            </div>
        )
    }

}

export default App